/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-13 Time: 22:23
 * OrderSweepScurrySave
 * 赶房 {"whsk_Order_Sweep":{"room":"0411","wuserid":"S03","iuserid":"S03","remark":"123456"}}
 */

import React, {Component} from 'react';
import {
    SafeAreaView,
    View,
    Text,
    Image,
    TouchableOpacity,
    ScrollView,
    FlatList,
    Modal, Platform, BackHandler, ToastAndroid, TextInput,
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './changeStatusScreen.Style'
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent";
import AntDesign from "react-native-vector-icons/AntDesign";
import FontAwesome from "react-native-vector-icons/FontAwesome"
import DatePicker from 'react-native-datepicker'
import {
    COLOR_FOCUS,
    COLOR_HEADER_END,
    COLOR_HEADER_START, COLOR_LINK,
    COLOR_THEME,
    FONT_COLOR_SUB_TITLE, FONT_COLOR_TITLE,
    FONT_SIZE_TITLE
} from "../../../constant/PHColors";
import BottomButtonView from "../../../component/BottomButtonView/BottomButtonView";
import {FetchStatus} from "../../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../../configuration/ReturnStatus";
import {doDisplayWarnMessage} from "../../../component/Message/Action";
import {SCREEN_WIDTH} from "../../../constant/PHScreen";
import SelectDatePlugIn from "../../custom/selectDateTime/selectDatePlugIn";
import {retrieveLogRecord,housekeepingSweepSetStatus} from "./Actions";
import {Row, Rows, Table} from "react-native-table-component";

class changeStatusScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `修改房态`,
        headerRight: (
            <TouchableOpacity activeOpacity={0.9} onPress={
                ()=>{
                    navigation.state.params.navigatePress();
                }
            }>
                <View style={{width: 80, height: 44, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{fontSize: 16, color: '#212121'}}>
                        保存
                    </Text>
                </View>
            </TouchableOpacity>
        )
    });

    // 构造
    constructor(props) {
        super(props);

        let date = new Date();
        let year = date.getFullYear().toString();
        let month = (date.getMonth()+1).toString();
        if(Number(month)<10){
            month = '0'+month
        }
        let day = date.getDate().toString();
        if(Number(day)<10){
            day = '0'+day
        }
        let opdate = year+'-'+month+'-'+day;

        // 初始状态
        this.state = {
            room:this.props.navigation.getParam("room")?this.props.navigation.getParam("room"):'',
            hsk_status:this.props.navigation.getParam("hsk_status")?this.props.navigation.getParam("hsk_status"):'CL',
            checked:require("../../../resource/login/dl_yixuan.png"),
            uncheck:require("../../../resource/login/dl_weixuan.png"),
            startdate:opdate,
            enddate:opdate,
            reportData:[],
        };

        this.tableHeader = ["用户名","日期时间","房号","明细"];
        this.tableWidth = [70,100,70,SCREEN_WIDTH-240];

    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;


        if (nextProps.onRetrieveLogRecord !== this.props.onRetrieveLogRecord && nextProps.onRetrieveLogRecord.fetchStatus === FetchStatus.Success) {
            if (nextProps.onRetrieveLogRecord.RETURN === ReturnStatus.Success) {
                console.log(JSON.stringify(nextProps.onRetrieveLogRecord.DATA))

                let rows = nextProps.onRetrieveLogRecord.DATA;
                let data = [];
                rows.map((item,index)=>{
                    let data_son = [];
                    data_son.push(item.log_user);
                    data_son.push(item.log_date_time1);
                    data_son.push(item.room);
                    data_son.push(item.comment);
                    data.push(data_son)
                });

                this.setState({
                    reportData:data,
                })
                this.reportData = data
            } else {
                // dispatch(doDisplayWarnMessage(nextProps.onRetrieveLogRecord.MSG))
            }
        }

        if (nextProps.onHousekeepingSweepSetStatus !== this.props.onHousekeepingSweepSetStatus && nextProps.onHousekeepingSweepSetStatus.fetchStatus === FetchStatus.Success) {
            if (nextProps.onHousekeepingSweepSetStatus.RETURN === ReturnStatus.Success) {
                this.props.navigation.state.params.callBack()
            } else {
                // dispatch(doDisplayWarnMessage(nextProps.onHousekeepingSweepSetStatus.MSG))
            }
        }


    }

    // 组件渲染后调用
    componentDidMount() {
        let {dispatch} = this.props;

        this.props.navigation.setParams({navigatePress:this.onPressToDataBack});

        this.getRecordLog();
    }

    onPressToDataBack=()=> {
        let {dispatch} = this.props;

        //HousekeepingSweepSetStatus
        let str1 = {"ho_rooms":{"room":this.state.room,"hsk_status":this.state.hsk_status}}
        dispatch(housekeepingSweepSetStatus(JSON.stringify(str1)));
    };

    render() {
        let {dispatch} = this.props;
        let _this = this;
        return (
            <SafeAreaView style={styles.body}>
                <ScrollView style={styles.body}>

                    {/* 地点 */}
                    <View style={{backgroundColor: '#FFF'}}>
                        <View style={styles.itemHeader}>
                            <View style={styles.itemHeaderLeft}>
                                <Text style={styles.itemHeaderText}>
                                    {this.state.room}
                                </Text>
                            </View>
                            <View style={styles.itemHeaderRight} >
                                <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                    this.props.navigation.navigate('setOOOSScreen',{room:this.state.room,callBack:()=>{
                                            this.getRecordLog();
                                            this.props.navigation.state.params.callBack();
                                        }});
                                }}>
                                    <Text style={{color:COLOR_LINK}}>
                                        封房/解封
                                    </Text>
                                </TouchableOpacity>

                            </View>
                        </View>

                        <DividingLineViewComponent lineHeight={1}/>

                        <View style={{margin: 5,marginLeft:15,flexDirection:'row'}}>
                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                this.setState({
                                    hsk_status:'CL',
                                })
                            }}>
                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                    <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.hsk_status==="CL"?this.state.checked:this.state.uncheck)}/>
                                    <Text style={{fontSize: 16, marginLeft: 10}}>
                                        清洁房
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={{margin: 5,marginLeft:15,flexDirection:'row'}}>
                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                this.setState({
                                    hsk_status:'TU',
                                })
                            }}>
                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                    <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.hsk_status==="TU"?this.state.checked:this.state.uncheck)}/>
                                    <Text style={{fontSize: 16, marginLeft: 10}}>
                                        浮沉房
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={{margin: 5,marginLeft:15,flexDirection:'row'}}>
                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                this.setState({
                                    hsk_status:'DI',
                                })
                            }}>
                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                    <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.hsk_status==="DI"?this.state.checked:this.state.uncheck)}/>
                                    <Text style={{fontSize: 16, marginLeft: 10}}>
                                        脏房
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>

                    <DividingLineViewComponent lineHeight={5}/>


                    <View style={{backgroundColor: '#FFF'}}>
                        <View style={styles.itemHeader}>
                            <View style={styles.itemHeaderLeft}>
                                <AntDesign class={'aaa'} name={'clockcircleo'} size={16} style={{color: COLOR_LINK, marginRight: 10}} />
                                <SelectDatePlugIn defaultDate={this.state.startdate} textStyle={styles.opdateViewStyle} dateBack={(date)=>{
                                    this.setState({startdate:date});
                                    let {dispatch} = this.props;

                                    let reg = new RegExp("-","g");
                                    let startdate =(date.replace(reg,""));
                                    let enddate =(this.state.enddate.replace(reg,""));
                                    this.state.startdate = startdate
                                    this.state.enddate = enddate

                                    // let str = {"where":{"all_search":"","startdate":startdate,"enddate":enddate},"arg":{"selectname":"report_room_move","fuzzy":"yes"},"radio":{},"checkbox":{}}
                                    // dispatch(retrieveLogRecord(JSON.stringify(str)));

                                    this.getRecordLog();
                                }} />
                                <Text style={styles.opdateViewStyle}>   -   </Text>
                                <SelectDatePlugIn defaultDate={this.state.enddate} textStyle={styles.opdateViewStyle} dateBack={(date)=>{
                                    this.setState({enddate:date});
                                    let {dispatch} = this.props;

                                    let reg = new RegExp("-","g");
                                    let startdate =(this.state.startdate.replace(reg,""));
                                    let enddate =(date.replace(reg,""));
                                    // let str = {"where":{"all_search":"","startdate":startdate,"enddate":enddate},"arg":{"selectname":"report_room_move","fuzzy":"yes"},"radio":{},"checkbox":{}}
                                    // dispatch(retrieveLogRecord(JSON.stringify(str)));

                                    this.state.startdate = startdate
                                    this.state.enddate = enddate


                                    this.getRecordLog();

                                }} />
                            </View>
                            <View style={styles.itemHeaderRight}  onPress={()=>{
                                this.getRecordLog();
                            }}>
                                <Text style={{color:COLOR_LINK}}>
                                    查询
                                </Text>
                            </View>
                        </View>

                    </View>

                    <View style={{backgroundColor: '#FFF'}}>
                        <ScrollView style={styles.body}>
                            <FlatList
                                data={[this.state.reportData]}
                                keyExtractor={(item, index) => index}
                                renderItem={this.renderTableItem}
                                horizontal={true}
                                showsHorizontalScrollIndicator={false}
                            />
                        </ScrollView>
                    </View>


                </ScrollView>

            </SafeAreaView>
        )
    }

    getRecordLog(){
        let {dispatch} = this.props;

        let reg = new RegExp("-","g");
        let startdate =(this.state.startdate.replace(reg,""));
        let enddate =(this.state.enddate.replace(reg,""));

        let str = "log_type = 'C' and room = '"+this.state.room+"' and log_date >= '"+startdate+"' and log_date <= '"+enddate+"'  order by log_date_time1 desc"
        dispatch(retrieveLogRecord(str));
    }

    renderTableItem=({item})=>{
        let _this = this;
        return(
            <Table style={{marginLeft: 0}}>
                <Row data={_this.tableHeader} widthArr={_this.tableWidth} style={styles.tableHeader} textStyle={styles.tableText}/>
                <Rows data={item} widthArr={_this.tableWidth} style={styles.tableHeader} textStyle={styles.tableText}/>
            </Table>
        )
    }
}

const props = state => {
    return {
        onRetrieveLogRecord:state.onRetrieveLogRecord,
        onHousekeepingSweepSetStatus: state.onHousekeepingSweepSetStatus,
    }
}

export default changeStatusScreen = connect(props)(changeStatusScreen);